<script setup>
import { reactive, ref, watch,watchEffect } from "vue";
import Foot from "./Foot.vue";
import Head from "./Head.vue";

    const hobby = ref({});
    const msg = reactive({
        "hello":"楚门的世界"
    });
    const handleGetInfo = (data) => {
        console.log('handleGetInfo',data)
    }
    const handleClickMe = (data) => {
        console.log('handleClickMe',data)
    }
    const footProp = reactive({
        "name":"楚门的世界",
        "version":"2.2.2"
    });
    const num = ref(1);
    const items = reactive([
        {"id": "1", "name": "apple","price": 100},
        {"id": "2", "name": "orange","price": 100},
        {"id": "3", "name": "banana","price": 100},
    ])
    // next btn
    const next = () => {
        if (num.value ==4) {
            num.value = 1
            return
        }
        num.value++
    }
    const prev = () => {
        if (num.value ==1) {
            num.value = 4
            return
        }
        num.value--;
    }
    // watchEffect
    watchEffect(() => {
        console.log(hobby.value);
    })
    watch(() => hobby.value, (newValue,OldValue) => {
        console.log(hobby.value,newValue,OldValue)
    })
    // automatic update
    watchEffect(() => {
        console.log('watch effect',hobby.value)
    });
</script>
<template>
    <div>
        <h1>hello,world</h1>
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>
        <select v-model="hobby">
            <option value="1">football</option>
            <option value="2">basketball</option>
            <option value="3">yellow</option>
        </select>
        <br />
        {{ num }}
        <img :src="`/src/assets/img/${num}.jpg`" style="width:200px;height:200px;"/>
        <br />
        <button @click="prev">Prev</button>
        <button @click="next">Next</button>         
        <br />
        <Head :msg="msg.hello"></Head>
        <Head msg="K歌之王">
            <template #code>
                <p>K歌之王K歌之王K歌之王K歌之王</p>
            </template>
        </Head>

        this is middle message
        <Foot name="good site" version="1.2.2"/>
        <Foot :="footProp" @GetInfo="handleGetInfo" @ClieckMe="handleClickMe"/>

        <Foot name="good site" version="1.2.2">
            <ul>
                <li>A</li>
                <li>A</li>
                <li>A</li>
            </ul>
        </Foot>

    </div>

</template>

